<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>公司基本信息</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css">
</head>

<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" fromapi="/api/app/call/getusers_gongsihuanjing_gs"
            action="/api/app/call/setusers_gongsihuanjing_gs" method="post"
            class="mctag">
        <MCtitle class="mctag">公司环境</MCtitle>
        <div class="content">
            <ul class="basephotoUl">
            </ul>
              <button id="submit" type="submit"
                    class="mui-btn mui-btn-primary"  >
                保存
            </button>
        </div>

    </MCform>
</div>

<script type="text/javascript" src="/h5/js/all2.js"></script>
</body>
<style>


</style>
<script>
    function toli(mcname,title){
        var html='<li class="li">'+
                 '   <p class="ti">'+title+'</p>'+
                  '  <div mcname="'+mcname+'" defaultval="[]" class="conli clearfix">'+
                     '   <div v-for="li in '+mcname+'" class="photodiv on">'+
                        '    <img :imgvalue="li" :src="li" class="pic"/>'+
                         '   <i class="closeico"></i>'+
                     '   </div>'+
                      '  <div v-bind:style="{display:'+mcname+'.length<3?\'block\':\'none\'}" class="photodiv photodivfile">'+
                          '  <input type="file">'+
                          '  <i class="cameraIco"></i>'+
                            '<p class="p">请上传/拍摄(<span>{{'+mcname+'.length}}</span>/3)</p>'+
                        '</div>'+
                    '</div>'+
                '</li> ';
        $('.basephotoUl').append(html);
    }
    toli('zongjingban','总经办');
    toli('xiaoshoubu','销售部');
    toli('zhaoshangbu','招商部');

    toli('dianshangbu','电商部');
    toli('shejibu','设计部');
    toli('jishubu','技术部');

    toli('caigoubu','采购部');
    toli('shengchanbu','生产部');
    toli('waifabu','外发部');

    toli('caiwubu','财务部');
    toli('xingzhengbu','行政部');
    toli('renshibu','人事部');

    toli('pinkongbu','品控部');
    toli('wuliubu','物流部');
    toli('cangchubu','仓储部');

    toli('huiyishi','会议室');
    toli('zhanshiting','展示厅');



    var view = new MC.View.MCform('#Form');
    $('.basephotoUl .photodiv').on('click', function (e) {
        var li = $(e.currentTarget).find('[type=file]');
        li[0].click();
    });
    ///   view.vue.zongjingban=['http://www.fuzhuangchangongxiao.cn/uploads/20200425/1261e1097568472b1ebff5d84282336esmall.jpg'];
    MC.API.bindFileUp($(".basephotoUl .li [type=file]"), (src, sel, obj) => {
        var par = $(obj).parents('[mcname]');
        var mcname = par.attr('mcname');
        view.vue[mcname].push(src);
        if (view.vue[mcname].length == 3) {
            // $('[mcname='+mcname+'] .photodivfile').hide();
        }
    });
    $('.basephotoUl').on('click', ".photodiv .closeico", function () {
        var par = $(this).parent();
        var mcname = $(this).parents('[mcname]').attr('mcname');
        var delsrc=par.find('.pic').attr('imgvalue');
            var listJQ = $('[mcname=' + mcname + '] .photodiv.on .pic');
            var list = [];
            for (var i = 0; i < listJQ.length; i++) {
                var src=$(listJQ[i]).attr('imgvalue');
                if(src!==delsrc)
                list.push(src);
            }
            view.vue[mcname] = list;
    });
    view.dataTo=function(list){
        console.log(list);
        for(var key in list){
         //   console.log(key);
            list[key]=list[key].join(',');
        }
        return list;
    }



</script>
</body>
</html>